<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=treemap-drill-down
-->
<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>

<body style="height: 100%; margin: 0">
    <div id="menu">
        <input id="selectfile" , type="file">
    </div>
    <br />
    <div id="container" style="height: 100%"></div>

    <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
    <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
    <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
    <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
        -->
    <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
        -->


    <script type="text/javascript">
        function updateValue(e) {
            var reader = new FileReader();
            reader.onload = function() {
                tst(this.result);
            }
            reader.readAsText(this.files[0]);
        }
    </script>

    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};

        var option;

        function tst(jsonStr) {
            myChart.showLoading();
            var rawData = JSON.parse(jsonStr);

            myChart.hideLoading();

            function convert(source, target, basePath) {
                for (var key in source) {
                    var path = basePath ? (basePath + '.' + key) : key;
                    if (!key.match(/^\$/)) {
                        target.children = target.children || [];
                        var child = {
                            name: path
                        };
                        target.children.push(child);
                        convert(source[key], child, path);
                    }
                }

                if (!target.children) {
                    target.value = source.$count || 1;
                } else {
                    target.children.push({
                        name: basePath,
                        value: source.$count
                    });
                }
            }

            var data = [];

            convert(rawData, data, '');

            myChart.setOption(option = {
                title: {
                    text: 'ECharts 配置项查询分布',
                    subtext: '2016/04',
                    left: 'leafDepth'
                },
                tooltip: {},
                series: [{
                    name: 'option',
                    type: 'treemap',
                    visibleMin: 300,
                    data: data.children,
                    leafDepth: 2,
                    levels: [{
                        itemStyle: {
                            borderColor: '#555',
                            borderWidth: 4,
                            gapWidth: 4
                        }
                    }, {
                        colorSaturation: [0.3, 0.6],
                        itemStyle: {
                            borderColorSaturation: 0.7,
                            gapWidth: 2,
                            borderWidth: 2
                        }
                    }, {
                        colorSaturation: [0.3, 0.5],
                        itemStyle: {
                            borderColorSaturation: 0.6,
                            gapWidth: 1
                        }
                    }, {
                        colorSaturation: [0.3, 0.5]
                    }]
                }]
            });
        }

        /*
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        */
    </script>

    <script type="text/javascript">
        document.getElementById("selectfile").addEventListener('input', updateValue);
    </script>
</body>

</html>